<template>
  <div class="login">
    
    
    <video :class="{'fullScreen': fullScreen}" :height="width" :width="height" x5-video-player-type="h5-page" webkit-playsinline="true" playsinline="true" @canplay="audioLoad"  @ended="audioEnd" ref="audio" preload="metadata" autoplay="autoplay"  src="http://www.mingxiaoclub.cn/video/2.mp4"></video>
    
    <div :class="{'fullScreenMenu': fullScreen}" :style="{width: height + 'px'}">
      <i class="icon_play" v-if="!videoPlay" @click="play"></i>
      <i class="icon_pause" v-else @click="pause"></i>
      <i class="right icon_fullScreen" @click="full" v-if="!fullScreen"></i>
      <i class="right icon_fullScreen" @click="exitFullScreen" v-else></i>
    </div>
    <!-- <div class="popup" v-show="showPop">
      遮罩层
    </div> -->
  </div>
</template>



<script>
import {
  createNamespacedHelpers,
  mapMutations
} from "vuex";
let {
  mapState,
  mapGetters,
  mapActions
} = createNamespacedHelpers("adminBasic");

export default {
  name: 'test',
  data() {
    return {
      showPop: false,
      videoPlay: false,
      fullScreen: false,
      width: '',
      height: '100%',

      loginData: {
        accountName: '',
        accountPassword: '',
      },
      
    }
  },

  watch: {
    fullScreen(newVal, oldVal) {
      if(newVal == false) {
        this.height = '100%';
        this.width = 'auto'
      }
    }
  },

  mounted() {
    // window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    //   if (window.orientation === 180 || window.orientation === 0) { 
    //     alert('竖屏状态！');
    //   } 
    //   if (window.orientation === 90 || window.orientation === -90 ){ 
    //     alert('横屏状态！');
    //   } 
    // }, false);

    // document.body.addEventListener('touchstart', () => {
    //   console.log('aaaa')
    //   this.$refs.audio.play();
    // })
    
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),
    ...mapMutations([
      "updateInfo"
    ]),

    play() {
      this.$refs.audio.play();
      this.videoPlay = true;
    },
    pause() {
      this.$refs.audio.pause();
      this.videoPlay = false;
    },
    full() {
      this.fullScreen = true;
      let w = document.body.clientWidth;
      let h = document.body.clientHeight;

      this.width = w;
      this.height = h;

    },
    exitFullScreen() {
      this.fullScreen = false;
    },

    audioEnd() {
      this.showPop = true;
      this.videoPlay = false;
    },
  }

}
</script> 


<style scoped>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  background: #fff;
  width: 100px;
  height: 100px;
  z-index: 99999999999;
}


.fullScreen {
  z-index: 100;
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: fill;
  -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}


.fullScreenMenu {
  position: fixed;
  z-index: 99999;
  transform: rotate(90deg);
  transform-origin:0% 0%;
  top: 0;
  left: 1.593333rem;
  background: rgba(0, 0, 0, .4);
  height: 1.593333rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  padding: 0 .266667rem;
  box-sizing: border-box;
}

.fullScreenMenu .right {
  margin-left: auto;
}

.icon_play {
  display: inline-block;
  width: 1.093333rem;
  height: 1.093333rem;
  background: url('../assets/img/icon_play.png') 0 0 no-repeat;
  background-size: contain;
}
.icon_pause {
  display: inline-block;
  width: 1.093333rem;
  height: 1.093333rem;
  background: url('../assets/img/icon_pause.png') 0 0 no-repeat;
  background-size: contain;
}
.icon_fullScreen {
  display: inline-block;
  width: .533333rem;
  height: .533333rem;
  background: url('../assets/img/icon_fullScreen.png') 0 0 no-repeat;
  background-size: contain;
}

</style>